<template>
  <el-dialog
    v-el-drag-dialog
    :title="type === 'add' ? '新增气瓶设置' : '编辑气瓶设置'"
    :visible.sync="visible"
    width="700px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="130px">
      <el-form-item label="选择年份:" prop="year">
        <el-date-picker
          v-model="temp.year"
          style="width: 100%;"
          type="year"
          placeholder="选择年"
          value-format="yyyy"
          :picker-options="pickerOptionsYear"
        />
      </el-form-item>
      <el-form-item label="气瓶类型:" prop="cylinderTypeCode">
        <el-select
          v-model="temp.cylinderTypeCode"
          clearable
          filterable
          :filter-method="filterCylinderType"
          style="width: 100%;"
          placeholder="请选择"
          @clear="clearCylinderType"
          @focus="focusCylinderType"
        >
          <el-option
            v-for="(item, index) in cylinderTypeMapCopy"
            :key="index"
            :label="item.dictShortName + '-' + item.dictName"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="未超检回收单价:" prop="nonInspectionRecoveryPrice">
        <el-input-number
          v-model.trim="temp.nonInspectionRecoveryPrice"
          :controls="false"
          :min="0"
          :max="100000"
          placeholder="请输入"
          clearable
          :precision="2"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="超检回收单价:" prop="exceedInspectionRecoveryPrice">
        <el-input-number
          v-model.trim="temp.exceedInspectionRecoveryPrice"
          :controls="false"
          :min="0"
          :max="100000"
          placeholder="请输入"
          clearable
          :precision="2"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="未报废回收单价:" prop="unScrapRecoveryPrice">
        <el-input-number
          v-model.trim="temp.unScrapRecoveryPrice"
          :controls="false"
          :min="0"
          :max="100000"
          placeholder="请输入"
          clearable
          :precision="2"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="报废回收单价:" prop="scrapRecoveryPrice">
        <el-input-number
          v-model.trim="temp.scrapRecoveryPrice"
          :controls="false"
          :min="0"
          :max="100000"
          placeholder="请输入"
          clearable
          :precision="2"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input v-model="temp.remark" type="textarea" :rows="2" show-word-limit maxlength="100" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { cylinderDictSave, cylinderDictEdit } from '@/api'

  export default {
    name: 'add',
    props: {
      cylinderTypeMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        visible: false,
        type: 'add',
        preOrgId: '',
        temp: {
          year: '',
          cylinderTypeCode: '',
          nonInspectionRecoveryPrice: '',
          exceedInspectionRecoveryPrice: '',
          remark: '',
          unScrapRecoveryPrice: '',
          scrapRecoveryPrice: ''
        },
        rules: {
          year: [{ required: true, message: '请选择年份', trigger: 'change' }],
          cylinderTypeCode: [{ required: true, message: '请选择气瓶类型', trigger: 'change' }],
          nonInspectionRecoveryPrice: [{ required: true, message: '请输入回收单价', trigger: 'change' }],
          exceedInspectionRecoveryPrice: [{ required: true, message: '请输入回收单价', trigger: 'change' }],
          unScrapRecoveryPrice: [{ required: true, message: '请输入未报废回收单价', trigger: 'change' }],
          scrapRecoveryPrice: [{ required: true, message: '请输入报废回收单价', trigger: 'change' }]
        },
        pickerOptionsYear: {
          disabledDate(time) {
            const currentYear = new Date().getFullYear()
            return time.getFullYear() > currentYear
          }
        },
        cylinderTypeMapCopy: []
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.type = 'add'
          this.visible = true
          this.cylinderTypeMapCopy = [...this.cylinderTypeMap]
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.type = 'edit'
          }
        })
      },
      success() {
        this.$refs.dataForm.validate(async valid => {
          if (!valid) return
          const params = {
            ...this.temp
          }
          // 确定：判断【年份】和【瓶型】是否完全一致
          //   是：提示“年份和瓶型已存在”；
          //   否：产生一条记录，默认为启用状态；
          // if (this.type === 'add') {
          const info = this.cylinderTypeMap.find(item => item.id === this.temp.cylinderTypeCode)
          params.dictName = info ? info.dictName : ''
          params.dictShortName = info ? info.dictShortName : ''
          // }
          try {
            if (this.type === 'add') {
              this.add(params)
            } else {
              this.edit(params)
            }
          } catch (e) {
            this.$message.error('银行卡号已存在,请查看是否启用')
          }
        })
      },
      async add(params) {
        await cylinderDictSave(params)
        this.resolve()
        this.visible = false
        // this.$emit('refresh')
        this.$notify({
          title: '提示',
          message: '新增成功',
          type: 'success',
          duration: 2000
        })
      },
      async edit(params) {
        await cylinderDictEdit(params)
        this.resolve()
        this.visible = false
        // this.$emit('refresh')
        this.$notify({
          title: '提示',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.visible = false
        this.temp = {
          year: '',
          cylinderTypeCode: '',
          nonInspectionRecoveryPrice: '',
          exceedInspectionRecoveryPrice: '',
          remark: '',
          unScrapRecoveryPrice: '',
          scrapRecoveryPrice: ''
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      },
      // 过滤
      filterCylinderType(valueStr) {
        const dataList = [...this.cylinderTypeMap]// 拷贝
        if (valueStr && valueStr.trim()) {
          this.cylinderTypeMapCopy = dataList.filter(it => it.dictShortName.indexOf(valueStr) !== -1 || it.dictName.indexOf(valueStr) !== -1)
        } else {
          this.cylinderTypeMapCopy = dataList
        }
      },
      clearCylinderType() {
        const dataList = [...this.cylinderTypeMap]// 拷贝
        this.cylinderTypeMapCopy = dataList
      },
      focusCylinderType() {
        const dataList = [...this.cylinderTypeMap]// 拷贝
        this.cylinderTypeMapCopy = dataList
      }

    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;

  & /deep/ .el-form-item {
    width: 100%;
  }
}
</style>
